<template>
  <div>
    <el-button :disabled="!category3Id" type="primary" icon="el-icon-plus" @click="addAttrValue">添加属性</el-button>
    <el-table v-loading="loading" border style="margin-top:10px" :data="attrInfoList">
      <el-table-column
        label="序号"
        width="80"
        type="index"
        align="center"
      />
      <el-table-column
        label="属性名"
        width="180"
        align="center"
        prop="attrName"
      />
      <el-table-column
        v-slot="{row}"
        label="属性值列表"
      >
        <template>
          <el-tag v-for="attrValue in row.attrValueList" :key="attrValue.id" style="margin-right: 8px">{{ attrValue.valueName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
      >
        <template v-slot="{row, $index}">
          <el-tooltip style="margin-right: 5px" class="item" effect="dark" content="编辑属性" placement="top">
            <el-button type="warning" icon="el-icon-edit" size="small" @click="editValue(row)" />
          </el-tooltip>
          <el-popconfirm
            confirmButtonText="确定"
            cancelButtonText="取消"
            icon="el-icon-info"
            iconColor="red"
            title="您真的要删除此项属性值吗？"
            @onConfirm="delAttrValue(row, $index)"
          >
            <el-tooltip slot="reference" class="item" effect="dark" content="删除属性" placement="top">
              <el-button type="danger" icon="el-icon-delete" size="small" />
            </el-tooltip>
          </el-popconfirm>
        </template>

      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { reqGetAttrInfoList, reqDeleteAttrInfo } from '@/api/product/attr'
export default {
  name: 'AttrList',
  data() {
    return {
      attrInfoList: [], // 属性值列表
      loading: false
    }
  },
  computed: {
    ...mapState('category', ['category1Id', 'category2Id', 'category3Id'])
  },
  watch: {
    // 监视三级id变化，发生变化则请求数据
    category3Id: {
      immediate: true,
      handler: 'getAttrInfo'
    }
  },
  methods: {
    // 1.添加属性
    addAttrValue() {
      // 清空原来的数据值
      this.$emit('setAttr', {
        attrName: '',
        attrValueList: []
      })
      // 切换组件
      this.$emit('setIsShowAttrList', false)
    },
    // 2.修改属性
    editValue(row) {
      this.$emit('setAttr', row)
      this.$emit('setIsShowAttrList', false)
    },
    // 3.删除属性值
    async delAttrValue(row, index) {
      const res = await reqDeleteAttrInfo(row.id)
      if (res.code === 200) {
        this.getAttrInfo()
        this.attrInfoList.splice(index, 1)
        this.$message.success('删除成功！')
      }
    },
    // 0.获取属性值数据
    async getAttrInfo() {
      const { category1Id, category2Id, category3Id } = this
      if (!category3Id) {
        this.attrInfoList = [] // 清空不渲染数据
        return // 阻止代码向下执行
      }
      this.loading = true
      const res = await reqGetAttrInfoList(category1Id, category2Id, category3Id)
      if (res.code === 200) {
        this.attrInfoList = res.data
        this.loading = false
      } else {
        this.$message({
          type: 'error',
          message: res.message
        })
      }
    }
  }
}
</script>

<style>

</style>
